<template>
  <el-menu default-active="activeIndex" :router="true" class="el-menu-vertical-demo" :collapse="isCollapse"
    v-for="item in routers">
    <el-sub-menu v-if="item.children && item.children.length >= 1" :key="item.name" :index="item.path">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item v-for="item2 in item.children" :key="item2.name" :index="item2.path">{{ item2.name }}
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item v-if="!item.children" :index="item.path">{{ item.name }}</el-menu-item>
  </el-menu>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import "../utils/changecolor"
const $routers = useRouter();
let routers = $routers.options.routes;


// let css = Window.getComputedStyle(element, null)
// console.log(element.currentStyle.background);
// console.log(routers);
// routers.forEach((item) => {
//   for (let key in item) {
//     if (key == 'children') {
//     }
//   }

// })
// routers.map((index) => {
//   for (let key in index) {
//     console.log(key)
//   }
// })
// let arr = [];
// for (let i = 0; i < 10; i++){
//   arr.push(Math.floor(Math.random()*10))
// }
// function bigten(index) {
//   return index > 5;
// }
// let newarr = arr.filter(bigten);
// let newarr_ = newarr.filter((item, index) => {
//   return item >= 7;
// })
// console.log(arr)
// console.log(newarr)
// console.log(newarr_)


const isCollapse = ref(false)

// 测试递归
// var arrList = [1,2,3,5,100,500,10000,10000,1000,10000002]
//  //for循环测试
//  function forTest(){
//      console.time("for循环")
//      for(let i in arrList){
//          console.log(((arrList[i] + arrList[i]) * 5 - arrList[i])/arrList[i])
//      }
//      console.timeEnd("for循环")
//  }
//递归遍历测试
//  function recursive() {
//      console.time("递归遍历")
//      const testFun = function (i) {
//          console.log(((arrList[i] + arrList[i]) * 5 - arrList[i])/arrList[i])
//          if(i == arrList.length - 1){
//              return
//          }
//          i++
//          testFun(i)
//      }
//      testFun(0)
//      console.timeEnd("递归遍历")
//  }
// //  forTest()
// // recursive()
// //  递归案例
// //普通遍历实现
// var data = [
//  {
//      name: "所有物品",
//      children: [
//          {
//              name: "水果",
//              children: [{name: "苹果", children: [{name: '青苹果'}, {name: '红苹果'}]}]
//          },
//          {
//              name: '主食',
//              children: [
//                  {name: "米饭", children: [{name: '北方米饭'}, {name: '南方米饭'}]}
//              ]
//          },
//          {
//              name: '生活用品',
//              children: [
//                  {name: "电脑类", children: [{name: '联想电脑'}, {name: '苹果电脑'}]},
//                  {name: "工具类", children: [{name: "锄头"}, {name: "锤子"}]},
//                  {name: "生活用品", children: [{name: "洗发水"}, {name: "沐浴露"}]}
//              ]
//          }
//   ]
// }]
// var forFunction = function () {
//     var str = ""
//     data.forEach(function(row){
//         row.children.forEach(function(row){
//             row.children.forEach(function(row){
//                 row.children.forEach(function(row){
//                     str += (row.name + ";")
//                 })
//             })
//         })
//     })
//     console.log(str)
// }
// // forFunction()
// //递归遍历实现
// var recursiveFunction = function(){
//     var str = ''
//     const getStr = function(list){
//         list.forEach(function(row){
//             if(row.children){
//                 getStr(row.children)
//             }else {
//                 str += row.name + ";"
//             }
//         })
//     }
//     getStr(data)
//     console.log(str)
// }
// recursiveFunction()


// // 递归遍历快速排序
// var quickSort = function(arr) {
// if (arr.length <= 1) {//如果数组长度小于等于1无需判断直接返回即可
//     return arr;
// }
// var pivotIndex = Math.floor(arr.length / 2);//取基准点
// var pivot = arr.splice(pivotIndex, 1)[0];//取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数
// var left = [];//存放比基准点小的数组
// var right = [];//存放比基准点大的数组
// for (var i = 0; i < arr.length; i++){ //遍历数组，进行判断分配
//     if (arr[i] < pivot) {
//         left.push(arr[i]);//比基准点小的放在左边数组
//     } else {
//         right.push(arr[i]);//比基准点大的放在右边数组
//     }
// }
// //递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
// return quickSort(left).concat([pivot], quickSort(right));
// };

// var arr = [14, 50, 80, 7, 2, 2, 11];
// console.log(quickSort(arr));


// 递归遍历实现 异步输出
//常规实现
// var forTest = function () {
//    console.time("for时间")
//     for (let i = 0; i < 5; i++) {
//         setTimeout(function () {
//             console.log('for循环输出：' + (i + 1))
//             if(i+ 1 === 5){
//                 console.timeEnd("for时间")
//             }
//         }, 1000 * (i + 1))
//     }
// }
// forTest()
// //递归遍历实现
// var recursiveTest = function(){
//    console.time("递归时间")
//     const test = function (i) {
//         setTimeout(function () {
//             i = i + 1
//             console.log('递归输出：' + i)
//             if(i < 5){
//                 test(i)
//             }else {
//                 console.timeEnd("递归时间")
//             }
//         }, 1000)
//     }
//     test(0)
// }
// recursiveTest()
// foreach 
// 判空条件，非0为真 ，为假 false null undefined 0 ,'';为真   !false
var arr = [14, 50, 80, 7, 2, 2, 11, true, false, null, undefined, 0, '', ' '];
let arr1 = []
let arr2 = []
arr.forEach((item) => {
  if (item) {
    arr1.push(item)
  } else {
    arr2.push(item)
  }
})
// console.log(arr1, arr2);
var arr = [1, 3, 5, 7, 9]
let newarr = arr.map((item) => {
  return Math.trunc(Math.sqrt(item))

})
// console.log(newarr)

</script>
  
<style>
.el-menu.el-menu-vertical-demo::-webkit-scrollbar {
  display: none;
}

.el-sub-menu__title {
  background: #caeeff;
}

.el-menu-item-group {
  background: #caeeff;
}

.el-sub-menu__title {}

.el-sub-menu__title:hover {
  background: #caeeff;
}

.el-menu-item {
  background: #caeeff;
}

.el-aside {
  background: #caeeff;
}

#css {
  background: aqua;
  width: 100px;
  height: 30px;
}
</style>
 